<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://wl.shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="${ctx }/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">  
	.ztree .line{
		    line-height: 0;
		    border-top:none;
    		float: none;
	}
    .ztree li span.button.ico_docu {  
        background-position: -110px 0;  
        margin-right: 2px;  
        vertical-align: top;  
	}  
    .icon_lists li {
		float: left;
		width: 100px;
		height: 190px;
		text-align: center
	}
	.icon_lists .Hui-iconfont {
		font-size: 38px;
		line-height: 100px;
		margin: 10px 0;
		color: #333;
		-webkit-transition: font-size 0.25s ease-out 0s;
		-moz-transition: font-size 0.25s ease-out 0s;
		transition: font-size 0.25s ease-out 0s
	}
	.icon_lists .Hui-iconfont:hover {
		font-size: 100px
	}
	@media (max-width:450px) {
	.icon_lists li {
		width: 50%}
	}

</style>
<title>编辑权限</title>
</head>
<body>
<article class="page-container">
	<form action="${ctx }/a/menu/edit" method="post" class="form form-horizontal" id="form-member-add">
		<input type="hidden"	name="id"  id="id"	value="${menu.id }">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="${menu.name }" placeholder="权限名称" id="name" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>父栏目：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<ul id="treeDemo" class="ztree am-u-sm-2" ></ul>
				<input type="hidden"	name="parentId"  id="parentId"  value="${menu.parentId }">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">链接：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" placeholder="http://" name="href" id="href"  value="${menu.href }">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">权限标识：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" placeholder="权限标识" name="permission" id="permission"  value="${menu.permission }">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">图标：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<ul class="icon_lists cl">
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe625;">
										    <label for="radio-1"  ><i class="Hui-iconfont">&#xe625;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe616;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe616;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe613;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe613;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe64b;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe64b;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe62e;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe62e;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe633;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe633;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe634;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe634;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe687;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe687;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe623;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe623;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe637;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe637;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe63c;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe63c;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe60d;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe60d;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe607;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe607;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe6df;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe6df;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe603;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe603;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe653;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe653;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe611;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe611;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe600;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe600;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe609;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe609;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe695;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe695;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe6ff;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe6ff;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe66d;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe66d;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe6bb;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe6bb;</i></label>
									    </div>
								 </div>
					</li>
					<li>
								<div class="mt-20 skin-minimal">
						    			<div class="radio-box" >
										    <input type="radio"  name="icon"  value="&amp;#xe61e;">
										    <label for="radio-1" ><i class="Hui-iconfont">&#xe61e;</i></label>
									    </div>
								 </div>
					</li>
				</ul>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">target：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="target">
					<option value="" >请选择target</option>
					<option value="_blank"  <c:if test="${menu.target == '_blank' }">selected</c:if> >_blank</option>
					<option value="_self"  <c:if test="${menu.target == '_self' }">selected</c:if>>_self</option>
					<option value="_parent"  <c:if test="${menu.target == '_parent' }">selected</c:if>>_parent</option>
					<option value="_top"  <c:if test="${menu.target == '_top' }">selected</c:if>>_top</option>
					<option value="mainFrame"  <c:if test="${menu.target == 'mainFrame' }">selected</c:if>>mainFrame</option>
				</select>
				</span> </div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否在菜单中显示${menu.isShow }：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="check-box">
					<input type="checkbox" id="isShow"  name="isShow"	 <c:if test="${menu.isShow}">checked="checked"</c:if> 	 value="${menu.isShow }">
					<label for="checkbox-1">&nbsp;</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">备注：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="remarks" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" onKeyUp="$.Huitextarealength(this,100)">${menu.remarks }</textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${ctx}/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${ctx}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${ctx}/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="${ctx}/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript" src="${ctx }/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctx }/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="${ctx }/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="${ctx }/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${ctx }/lib/shopUtil.js?v=1.0"></script>
<script type="text/javascript">
$(function(){
	setZTree();
	$('input[name="icon"]').each(function(){
        if($(this).val() == "${menu.icon}"){
        	$(this).prop("checked",true);
        }
    });
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-member-add").validate({
		rules:{
			name:{
				required:true,
				minlength:2,
				maxlength:16
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			if($("#parentId").val() == null || $("#parentId").val()==""){
				layer.alert("父目录未选择");
				return;
			}else{
				var formData = ShopUtil.formToJSON();
				if($('input[name="isShow"]').prop("checked")){
					formData.isShow = true;
		        }else{
		        	formData.isShow = false;
		        }
				$.ajax({
                    type: 'POST',
                    url: $ctx + '/a/menu/edit',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            layer.alert('修改成功', {
                            	  closeBtn: 0
                            }, function(){
                            	window.parent.location.reload();
                            	var index = parent.layer.getFrameIndex(window.name);
                            	parent.layer.close(index);
                           	});
                        } else {
                            layer.alert(data.message);
                        }
                    }
                });
			}
			//parent.$('.btn-refresh').click();
			//parent.layer.close(index);
		}
	});
});

function setZTree(){
	 var setting = {
			 view: {
				fontCss : {"font-family": "微软雅黑", "font-size": "16px"}
			 },
			 data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pid",
						rootPId: 1
					}
			},
			callback: {
				onClick: function(event, treeId, treeNode){
					$("#parentId").val(treeNode.id);
				}
			}
		};
	 var zNodes = JSON.parse('${treeData}');
	 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,  zNodes);
	 var nodeid = "${menu.parentId}";
	 var node = zTreeObj.getNodeByParam("id", nodeid);
	 if(node != null){
		 zTreeObj.selectNode(node);
	 }else{
		 $("#parentId").val("1");
	 }
	 var disabledNode  = zTreeObj.getNodeByParam("id", "${menu.id}");
	 zTreeObj.removeNode(disabledNode);
}
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>